<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref, shallowReactive } from "vue";
import chinaMap from "@/assets/map/china.json";

defineOptions({
  name: "Welcome"
});

const mapDOM = ref(null);
const option = ref({
  tooltip: {},
  series: [
    {
      type: "map",
      map: "china",
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
      itemStyle: {
        areaColor: "#EDF0EC",
        borderColor: "#2b821d",
        opacity: 0.7
      },
      emphasis: {
        label: {
          show: true
        },
        itemStyle: {
          areaColor: "#2b821d"
        }
      },
      select: {
        itemStyle: {
          color: "#2b821d"
        }
      },
      tooltip: {
        position: [0, 0]
      },
      data: [
        { name: "北京市", value: 0 },
        { name: "天津市", value: 3 },
        { name: "河北省", value: 1.2 },
        { name: "山西省", value: 1.9 },
        { name: "新疆维吾尔自治区", value: 4.2 },
        { name: "辽宁省", value: 1.8 },
        { name: "吉林省", value: 2.6 },
        { name: "黑龙江省", value: 5.7 },
        { name: "上海市", value: 100 },
        { name: "江苏省", value: 3.6 },
        { name: "浙江省", value: 3.2 },
        { name: "安徽省", value: 4.9 },
        { name: "福建省", value: 2.1 },
        { name: "江西省", value: 1 },
        { name: "广西壮族自治区", value: 2.3 }
      ]
    }
  ],
  visualMap: {
    show: true,
    // 上下端文字
    text: ["高", "低"],
    // 最小值和最大值，必须指定
    min: 0.0,
    max: 6.0,
    // 位置
    left: "5%",
    bottom: "20%",
    // 是否展示滑块
    calculable: true,
    // 从下到上的颜色
    inRange: {
      color: ["#2b821d ", "#E5514C  "]
    },
    itemHeight: 100,
    //字体颜色
    textStyle: {
      color: "black",
      map: "china"
    }
  }
});

onMounted(() => {
  var myChart = echarts.init(mapDOM.value);
  echarts.registerMap("china", chinaMap);
  myChart.setOption(option.value);
});

// 根据配置项渲染ECharts
</script>

<template>
  <el-card>
    <h1>ep-monitoring-sys</h1>
    <div style="width: 500px; height: 500px">
      <div
        id="main"
        ref="mapDOM"
        class="mt-4"
        style="width: 500px; height: 500px"
      />
    </div>
  </el-card>
</template>

<style scoped></style>
